<script setup>
import { ref, toRaw, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import PageWrapper from '@components/PageWrapper.vue';
import { common, service } from '@utils';

const props = defineProps({
    homeId: String | Number,
});

const pageRef = ref();
const tableRef = ref();

const companys = ref();
const yesNo = ref();

const state = reactive({
    param: { have: true },
});

const getData = async ({ pageNum, pageSize }, cb) => {
    const param = { ...toRaw(state.param), homeId: props.homeId };
    const res = await service.homeActive.relationPageQuery(pageNum, pageSize, param);
    cb(res);
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0);
    }, 0);
};

const getYesNo = async () => {
    const res = await service.sys.dictionaryAll('yesNo');
    if (res) {
        res.forEach(item => {
            item.value === 'true' && (item.value = true);
            item.value === 'false' && (item.value = false);
        });
    }
    yesNo.value = res;
};

const getCompanys = async () => {
    const res = await service.auth.companyAll();
    companys.value = res;
};

const changeState = async (row, delOrAdd) => {
    let res;
    if (delOrAdd == '添加') {
        res = await service.homeActive.relationAdd({ homeId: props.homeId, goodsId: row.goodsId });
    } else {
        res = await service.homeActive.relationDelete({ homeId: props.homeId, goodsId: row.goodsId });
    }

    if (res) {
        pageRef.value.refresh(true);
        ElMessage.success(delOrAdd + '成功');
    }
};

const reset = () => {
    state.param = { have: true };
    pageRef.value.refresh();
};

getYesNo();
getCompanys();
</script>
<template>
    <section>
        <el-row :gutter="16">
            <el-col :span="5">
                <el-select v-model="state.param.companyCode" style="width: 100%" placeholder="所属商户" clearable>
                    <el-option v-for="{ label, companyCode } in companys" :key="companyCode" :label="label" :value="companyCode" />
                </el-select>
            </el-col>
            <el-col :span="5">
                <el-input v-model="state.param.name" placeholder="商品名称" clearable></el-input>
            </el-col>
            <el-col :span="5">
                <el-form-item label="是否关联">
                    <el-select v-model="state.param.have" style="width: 100%" clearable @change="pageRef.refresh()">
                        <el-option v-for="{ label, value } in yesNo" :key="value" :label="label" :value="value" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-button type="primary" @click="pageRef.refresh()">查询</el-button>
                <el-button type="primary" plain @click="reset">清空</el-button>
            </el-col>
        </el-row>
        <page-wrapper @get-data="getData" ref="pageRef">
            <template v-slot:default="props">
                <vxe-table ref="tableRef" :loading="props.loading" :data="props.tableData.records" :max-height="common.tableHeight(true, 1, 120)" highlight-hover-row round stripe border>
                    <vxe-column type="seq" width="60"></vxe-column>
                    <vxe-column field="goodsId" title="ID" />
                    <vxe-column field="goodsName" title="商品名称" />
                    <vxe-column field="companyName" title="商户" />
                    <vxe-column title="操作" :width="80" fixed="right">
                        <template #default="{ row }">
                            <section class="flex-align flex-wrap">
                                <el-button v-if="state.param.have" type="primary" text size="small" @click="changeState(row, '删除')">删除</el-button>
                                <el-button v-else type="primary" text size="small" @click="changeState(row, '添加')">添加</el-button>
                            </section>
                        </template>
                    </vxe-column>
                </vxe-table>
            </template>
        </page-wrapper>
    </section>
</template>
